import React, { FC, useRef, useEffect, useState } from 'react';
import { Line } from '@antv/g2plot';
import * as echarts from 'echarts';

const Chart: FC = () => {
  const main = useRef<HTMLDivElement | null>(null);
  const [data, setData] = useState(getData());

  useEffect(() => {
    // const line = new Line(main.current, {
    //   data,
    //   padding: 'auto',
    //   xField: 'x',
    //   yField: 'y',
    //   xAxis: {
    //     type: 'time',
    //     mask: 'HH:mm:ss',
    //   },
    //   smooth: true,
    //   point: {},
    // });

    // line.render();
    if (!main.current) return;
    const myChart = echarts.init(main.current);
    const options: any = {
      xAxis: {
        type: 'category',
        data: data.map((item) => item.x),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: data.map((item) => item.y),
          type: 'line',
        },
      ],
    };
    options && myChart.setOption(options);
  }, []);

  function getData() {
    // generate an array of random data
    const data: any = [];
    const time = new Date().getTime();

    for (let i = -19; i <= 0; i += 1) {
      data.push({
        x: time + i * 1000,
        y: Math.random() + 0.2,
      });
    }
    return data;
  }

  return <div ref={main} style={{ width: '100%', height: 300 }}></div>;
};

export default Chart;
